<template>
	<view class="app column" v-if="loaded">
		<view class="content row">
			<scroll-view class="left-side" scroll-y>
				<view class="item center" :class="{active: item.category_id === current.category_id}"
					v-for="item in list" :key="item.category_id" @click="changeCate(item)">
					<text>{{ item.category_name }}</text>
				</view>
			</scroll-view>
			<scroll-view class="right-side" scroll-y v-if="current.child.length>0">
				<image class="cate-image" :src="current.image_adv" mode="aspectFill"></image>
				<view class="wrap">
					<view class="item column" v-for="item in current.child" :key="item.category_id"
						@click="navTo('/pages/product/list?category_id1='+current.category_id+'&category_id2='+item.category_id+'&category_name='+item.category_name)">
						<image class="icon" :src="item.image" mode="aspectFill"></image>
						<text class="tit">{{ item.category_name }}</text>
					</view>
				</view>
			</scroll-view>
			<view v-else style="color: #999;margin: 0 auto;margin-top: -100%;font-size: 14px;">
				暂无数据...
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				loaded: false,
				list: [],
				current: {}
			}
		},
		onLoad(options) {
			if (options.uid) {
				//转发
				uni.setStorageSync('uid', options.uid);
			}
			if (options.param) {
				this.loadData(JSON.parse(options.param));
			} else {
				this.loadData(0);
			}
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			if (uni.getStorageSync('userInfo')) {
				path_share = path_share + '?uid=' + uni.getStorageSync('userInfo').member_id
			}
			return {
				title: path_title,
				path: path_share,
			}
		},
		methods: {
			async loadData(item) {
				this.$http.post('Goodscategory/list', {}).then((res) => {
					console.log(res)
					this.list = res.data.data;
					if (item == 0) {
						this.current = res.data.data[0];
					} else {
						this.current = item;
					}
					this.loaded = true;
				})
			},
			changeCate(item) {
				this.current = item;
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.app {
		height: 100%;
	}

	.content {
		flex: 1;
		// padding-top: 12rpx;
		overflow: hidden;
	}

	.content1 {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
		background-color: #fff;
	}

	.btn {
		width: 44px;
		height: 40px;
		padding: 5px 12px;
		position: relative;

		.mix-icon {
			font-size: 20px;
			color: #333;
		}

		.msg {
			position: absolute;
			right: 7px;
			top: 5px;
			width: 12px;
			height: 12px;
			background-color: $base-color;
			border: 2px solid #fff;
			border-radius: 100px;
			opacity: 0;

			&.show {
				opacity: 1;
			}
		}
	}

	.search-wrap {
		flex: 1;
		font-size: 14px;
		color: #999;
		border-radius: 100px;
		background-color: #f2f2f2;

		.icon-sousuo {
			margin-right: 6px;
			font-size: 18px;
			color: #999;
		}
	}

	.left-side {
		flex-shrink: 0;
		width: 180rpx;
		height: 100%;
		overflow-y: hidden;
		background-color: #f2f2f2;

		.item {
			height: 90rpx;
			font-size: 26rpx;
			color: #555;
		}

		.active {
			font-size: 28rpx;
			color: $base-color;
			font-weight: 700;
			background-color: #fff;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 30rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: $base-color;
				border-radius: 0 4rpx 4rpx 0;
			}
		}
	}

	.right-side {
		flex: 1;
		height: 100%;

		.cate-image {
			width: calc(100% - 40rpx);
			height: 200rpx;
			margin: 0 20rpx;
			border-radius: 8rpx;
		}

		.wrap {
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx 20rpx;
		}

		.item {
			flex-shrink: 0;
			justify-content: flex-start;
			align-items: center;
			width: 30%;
			padding: 30rpx 0 0;

			&:nth-child(3n-1) {
				width: 40%;
			}
		}

		.icon {
			width: 108rpx;
			height: 108rpx;
			margin-bottom: 16rpx;
		}

		.tit {
			width: 140rpx;
			font-size: 24rpx;
			color: #333;
			text-align: center;
			line-height: 1.4;
		}
	}
</style>
